<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
     }
     li{
        list-style: none;
     }
     .mi{
        width: 223px;
        margin: auto;
     }

     input{
        width: 223px;
        height: 48px;
        padding: 0 10px;
        border: 1px solid #e0e0e0;
        outline: none;
     }

     .mi .bc{
        border: 1px solid #ff6700;
     }
     ul{
        display: none;
        width: 223px;
        border: 1px solid #ff6700;
        background: #fff;
     }
     li{
        padding: 6px 15px;
        color: #424242;
     }

     li:hover{
        background-color: #eee;
     }
</style>
<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li>全部商品</li>
            <li>小米11</li>
            <li>小米10S</li>
            <li>小米笔记本</li>
            <li>小米手机</li>
            <li>黑鲨4</li>
            <li>空调</li>
        </ul>
    </div>

    <script>
        const inp = document.querySelector('input')
        const ul = document.querySelector('ul')
        inp.addEventListener('focus',function(){
            ul.style.display = 'block'
            inp.classList.add('bc')
        })

        inp.addEventListener('blur',function(){
            ul.style.display = 'none'
            inp.classList.remove('bc')
        })
    </script>
</body>
</html>